<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios</title>
</head>
<body>
  <button id="btn1">GET</button>
  <button id="btn2">POST</button>
  <button id="btn3">PUT</button>
  <button id="btn4">PATCH</button>
  <button id="btn5">DELETE</button>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  <script>
    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');
    const btn3 = document.getElementById('btn3');
    const btn4 = document.getElementById('btn4');
    const btn5 = document.getElementById('btn5');

    const instance = axios.create({
      baseURL: 'http://localhost:3000', // 基本请求路径
      timeout: 10000, // 请求的超时时间
      headers: { // 公共请求头

      }
    })

    // 请求拦截器：请求之前触发的
    instance.interceptors.request.use((config) => {
      // config 请求所有配置
      // 修改config配置
      // config.headers.token = 'xxxx';
      // config.headers.authorization = 'xxxx';

      return config;
    })

    // instance.interceptors.request.use((config) => {
    //   // config 请求所有配置
    //   console.log('请求拦截器成功的回调111');
    //   // 修改config配置
    //   return config;
    // }, (error) => {
    //   // 默认不会触发
    //   console.log('请求拦截器失败的回调111');
    //   return Promise.reject(error);
    // })

    // instance.interceptors.request.use((config) => {
    //   // config 请求所有配置
    //   console.log('请求拦截器成功的回调222');
    //   // 修改config配置
    //   return Promise.reject(111);
    // }, (error) => {
    //   // 默认不会触发
    //   console.log('请求拦截器失败的回调222');
    //   return Promise.reject(error);
    // })

    // 响应拦截器：接受到响应之后
    instance.interceptors.response.use((response) => {
      /*
        目的：让外面直接获取到响应成功的数据
        
        状态码 200-299之间都是响应成功
        反之就是响应失败
        
        响应成功并不代表功能成功，比如
          登录功能
            成功 
              {
                code: 10000,  代表请求是否成功（10000代表成功，其他值代表失败）
                // code: 1,
                data: {   请求成功的数据
                  user: {
                    ...
                  },
                }
                message: 'xxx', 请求失败的原因
                success: true   代表请求是否成功
              } 
            失败
              {
                code: 10001,
                data: null,
                message: '用户名已被注册'
              }
      */
     if (response.data.code === 10000) {
       // 功能成功
       return response.data.data
     } else {
       // 功能失败
       return Promise.reject(response.data.message);
     }
    }, (error) => {
      // 通常状态码4-5开头会进入这里
      
      if (error.response) {
        // if (error.response.status === 401) {
        //   return Promise.reject('未授权');
        // } else if (error.response.status === 404) {
        //   return Promise.reject('该资源未找到');
        // }
        return Promise.reject(errorMessages[error.response.status]);
      } else {
        // 断网（Network Error）
        // 请求超时（timeout）
        if (error.message.indexOf('Network Error') !== -1) {
          return Promise.reject('请打开网络链接再重试');
        } else if (error.message.indexOf('timeout') !== -1) {
          return Promise.reject('该切换4g网或连上wifi试试');
        }
      }
      
      return Promise.reject('未知错误，请联系管理员解决');
    })

    const errorMessages = {
      401: '未授权',
      404: '该资源未找到',
      403: '禁止访问',
      500: '服务器出现故障'
    }

    // instance.interceptors.response.use((response) => {
    //   console.log('响应拦截器成功的回调111');
    //   return response.data;
    // }, (error) => {
    //   console.log('响应拦截器失败的回调111');
    //   return Promise.reject(error);
    // })

    // instance.interceptors.response.use((data) => {
    //   console.log('响应拦截器成功的回调222');
    //   return data;
    // }, (error) => {
    //   console.log('响应拦截器失败的回调222');
    //   return Promise.reject(error);
    // })

    btn1.onclick = function () {
      instance({
        method: 'GET',
        url: '/posts',
      })
        .then((data) => {
          console.log(data);
        })
        .catch(err => console.log(err))
    }


  </script>
</body>
</html>